<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<ul id="list">
	<li>
	  	<input type="button" value="-" />
	    <strong>0</strong>
	  	<input type="button" value="+" />
	    单价：<em>12.5元</em>
	    小计：<span>0元</span>
    </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
	单价：<em>10.5元</em>
	小计：<span>0元</span>
	  </li>
	<li>
	<input type="button" value="-" />
	<strong>0</strong>
	<input type="button" value="+" />
	 单价：<em>8.5元</em>
	 小计：<span>0元</span>
  	</li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
	   单价：<em>8元</em>
	   小计：<span>0元</span>
	</li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
             单价：<em>14.5元</em>
            小计：<span>0元</span>
  </li>
</ul>

<p>
商品合计共：0件，共花费了：0元<br />
其中最贵的商品单价是：0元
</p>

<script type="text/javascript">
	var list = document.getElementById('list');
	var lis = document.getElementsByTagName('li');
	var p = document.getElementsByTagName('p')[0];
	var strong = document.getElementsByTagName('strong');
	var spans = document.getElementsByTagName('span');
	var em2 = document.getElementsByTagName('em');
	
	
	var index = 0;
//	index = strong.innerHTML;
	
	for(var i=0;i<lis.length;i++){
		fn(lis[i]);
//		index++;
		
	}
	function fn(obj){
		var btn = obj.getElementsByTagName('input');
		var stro = obj.getElementsByTagName('strong')[0];
		var em = obj.getElementsByTagName('em')[0];
		var span = obj.getElementsByTagName('span')[0];
		
		var num = 0;
		var max=0;

		btn[1].onclick = function(){
			var n = 0;
			var m = 0;
			var arr=[];
			var arr2=[];
			
			num++;
			stro.innerHTML = num;
			span.innerHTML = parseFloat(em.innerHTML)*num+'元';
			
			for(var i=0;i<strong.length;i++){
				n+=Number(strong[i].innerHTML);
				//根据定义一个变量来比较大小并且赋值
				var val=strong[i].innerHTML;
				var val2=parseFloat(em2[i].innerHTML);
				if(val>0 && max<val2){
					max=val2;
				}
			}
			
			for(var i=0;i<spans.length;i++){
				m+=parseFloat(spans[i].innerHTML);
			}
			
			
			
			p.innerHTML = '商品合计共：'+n+'件,共花费了：'+m+'元<br />其中最贵的商品单价是：'+max+'元';
		};
		btn[0].onclick = function(){
			var n = 0;
			var m = 0;
			num = stro.innerHTML;
			num--;
			if(num < 0){
				num = 0;
			}else{
				stro.innerHTML = num;
				span.innerHTML = parseFloat(em.innerHTML)*num+'元';
				for(var i=n;i<strong.length;i++){
					n+=Number(strong[i].innerHTML);
					var val=strong[i].innerHTML;
					var val2=parseFloat(em2[i].innerHTML);
					if(val>0 && max<val2){
						max=val2;
					}
				}
				for(var i=0;i<spans.length;i++){
					m+=parseFloat(spans[i].innerHTML);
				}
				p.innerHTML = '商品合计共：'+n+'件,共花费了：'+m+'元<br />其中最贵的商品单价是：'+max+'元';
			}
		}
		
	}
</script>
</body>
</html>